<template>
	<view class="container">
		<u-navbar 
			leftIconSize="0" 
			:placeholder="true" 
			:fixed="true" 
			:safeAreaInsetTop="true" 
			:is-back="false" 
			title="购物车" 
			:border-bottom="false" back-icon-color="#fff"></u-navbar>
		
		<car-list v-if="carList.length > 0" ref="mycar" :amount="amount" :carList="carList" @allSelBtn="allSelBtn" @selShop="selShop"
			:addressName="address.address_name" @selGoods="selGoods" @jsbtn="jsbtn" @delbtn="delbtn"
			@changeNum="changeNum"></car-list>

		<view style="width: 100%;" v-else>
			<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;min-height: 400rpx;width: 100%;background-color: #fff;">
				<u-image width="160" height="160" src="https://img.koalalf.com/cart/empty-carts.png" mode="widthFix">
				</u-image>
				<text style="color: #ccc;font-size: 28rpx;margin-top: 20rpx;margin-bottom: 40rpx;">暂无商品加入购物车，快去选购</text>
				<view class="guangguang" @click="goToIndex">去逛逛</view>
				<!-- <u-button size="mini" text="去逛逛" ></u-button> -->
			</view>
			<goodsRecommend></goodsRecommend>
		</view>
		
	</view>
	</view>
</template>

<script>
	import carList from '../../components/car-list/car-list.vue'
	import goodsRecommend from '../../components/goodsRecommend.vue'
	import { parseAddress } from '@/common/address.api.js'
	import { carts, selectCarts, createOrderByCarts, deleteCarts, createCarts } from '@/common/shopmall.api.js'
	export default {
		components: {
			carList,
			goodsRecommend
		},
		data() {
			return {
				maskTitle: '',
				carList: [],
				amount: 0,
				address:{
				},
				address_name:''
			}
		},
		onLoad() {
			let that = this;
			that.getCartsList()
			uni.$on('changeCarts', function(data) {
				that.getCartsList()
			})
		},
		methods: {
			goToIndex() {
				this.$u.route({
					type:'switchTab',
					url: 'pages/index/index',
					params: {
						
					}
				})
			},
			chooseAddress(address) {
				this.address = address;
			},
			getCartsList() {
				let that = this;
				carts({}).then(res => {
					that.carList = res.carts
					that.amount = res.amount
					that.address = res.address
					if(res.carts.length > 0){
						that.$refs.mycar?that.$refs.mycar.getAllMount(res.amount):'';
					}

					console.log(that.address)

					if (!res.address) {
						that.getLocation()
					}
				})
			},
			getLocation() {
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: function(res) {
						// parseAddress
						parseAddress({
							longitude: res.longitude,
							latitude: res.latitude
						}).then(resAddress => {
							console.log(resAddress)
							that.address = {
								address_name:resAddress.formatted_addresses.recommend
							}
							that.address_name = resAddress.formatted_addresses.recommend
						})
					}
				});
			},
			confirm: function() { //确定按钮
				console.log('您点击了确定按钮');
			},
			cancel: function() { //取消按钮
				console.log('您点击了取消按钮');
			},
			selGoods: function(carList, cartsId) {
				var that = this;
				that.carList = carList;
				selectCarts({
					carts_id: cartsId,
					selected: 'one'
				}).then(res => {
					that.amount = res.amount
					that.$refs.mycar.getAllMount(that.amount);
				})
			},
			selShop: function(carList) {
				var that = this;
				that.carList = carList;
			},
			allSelBtn: function(carList, select) {
				var that = this;
				let selected = 'all';
				that.carList = carList;

				if (!select) {
					selected = 'not_all';
				}
				selectCarts({
					selected
				}).then(res => {
					that.amount = res.amount
					that.$refs.mycar.getAllMount(res.amount);
				})
			},
			jsbtn: function(ids) { //结算按钮
				var that = this;
				createOrderByCarts({
					carts_id: ids
				}).then(res => {
					that.$u.route({
						url: "pages/orders/createOrder",
						params: {
							data: JSON.stringify(res)
						}
					})
				})
			},
			delbtn: function(ids, list) { //删除按钮
				var that = this;
				deleteCarts({
					carts_id: ids
				}).then(res => {
					for (let k = 0; k < list.length; k++) {
						if (list[k].selected == true) {
							list.splice(k, 1);
							k--
						}
					}
					that.carList = list;
					that.amount = res.amount
					that.$refs.mycar.getAllMount(res.amount);
				})
			},
			changeNum: function(carList, gIndex, number, id) {
				let that = this;
				/* 
				 请求接口数据

				*/
				createCarts({
					product_sku_id: carList[gIndex].product_sku_id,
					quantity: number,
					product_id: carList[gIndex].product_id
				}).then(res => {
					that.amount = res.amount
					that.$refs.mycar.getAllMount(that.amount);
				})
				carList[gIndex].quantity = number;

				that.carList = carList;
			},
			
			
		},
		onReachBottom() {

		},
		onShareAppMessage() {

		}
	}
</script>
<style>
	page {
		background: #f5f5f5;
		min-height: 100vh;
	}
</style>
<style scoped>
	view,
	textarea,
	input,
	text,
	button {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
		font-size: 28rpx;
		font-family: "微软雅黑";
	}
	
	.guangguang{
		width: 128rpx;
		height: 60rpx;
		border: 1rpx solid #888282;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #888282;
		font-size: 22rpx;
	}
	
	.uni-checkbox-input {
		border-radius: 50% !important;
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		background: #f5f5f5;
		overflow: hidden;
	}

	.line1 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		line-clamp: 1;
		box-orient: vertical;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		word-break: break-all;
		/* 英文换行问题 */
	}

	.line2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		line-clamp: 2;
		box-orient: vertical;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-break: break-all;
		/* 英文换行问题 */
	}

	.centerboth {
		display: flex;
		display: -webkit-flex;
		align-items: center;
		-webkit-align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
	}

	.clearfix:after {
		content: "";
		display: block;
		visibility: hidden;
		height: 0;
		clear: both;
	}

	.clearfix {
		zoom: 1;
	}

	image {
		padding: 0;
		margin: 0;
	}

	textarea {
		width: 300rpx;
		height: 75rpx;
		display: block;
		position: relative;
		font-size: 28rpx;
	}

	button::after {
		border: none;
	}

	input:-ms-input-placeholder {
		color: #808080;
	}

	car-list {
		width: 100%;
	}
</style>
